<script setup lang="ts">
import { ref } from "vue";
import type { Ref } from "vue";

const showList = ref(false);

interface iShow {

    available: number,
    condition: string
    reason: string
    value: number,
    name: string,
    startAt: number,
    endAt: number,
    valueDesc: string
    unitDesc: string,
    id: string
    description: string

}
// const coupons: Ref<number> = ref(2)

const coupons: Ref<iShow[]> = ref([
    {
        id: '1',
        available: 1,
        condition: '无门槛\n最多优惠12元',
        reason: '',
        value: 150,
        name: '满100减10元',
        startAt: 1489104000,
        endAt: 1514592000,
        valueDesc: '￥1.5',
        unitDesc: '元',
        description: '请在有效期使用'

    }
]);
</script>

<template>
    <div>
        <div class="tittle">
            <van-nav-bar title="优惠券" left-arrow @click-left="$router.push('/message')">
            </van-nav-bar>
        </div>
        <div>
            <van-coupon-cell class="youhui" :coupons="coupons" @click="showList = true" />
            <!-- 优惠券列表 -->
            <van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
                <van-coupon-list :coupons="coupons" />
            </van-popup>
        </div>
        <div class="love">
            <van-icon name="like" color="red" />
            <h3>猜你喜欢</h3>
        </div>
        <div>
            <LikeList></LikeList>

        </div>
    </div>
</template>
<style>
h3 {
    text-align: center;
}

.love {
    display: flex;
    /* justify-content: space-evenly; */
    height: 0.4rem;
    padding-left: 1.5rem;
}

.love .van-icon {
    line-height: 0.4rem;
    margin-right: 0.15rem;
    margin-top: 0.02rem;
}

.love h3 {
    font-weight: 600;


}

.youhui {
    border-bottom: 1px solid #f0f2f4;
}
</style>